<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>

    <style>
        .red{
            background-color: red;
            transition: 1s;
        }
        .blue{
            background-color: blue;
            transition:1s;
        }
    </style>
</head>
<body>
    <div ng-app="" ng-init="bool=true;arr=['小辣椒','安静的','垃圾袋'];ar=[
       {name:'aa',age:22},{name:'rr',age:88}];obj={name:'ido',age:999}">
        <!--  ng-+事件名字 即可绑定事件
             ng-show/ng-hide:后面跟布尔值，是否显示与隐藏
             -->
        <!--ng-class 给节点绑定class-->
        <!--ng-repeat :循环渲染DOM节点,给谁添加，就复制谁-->

        <!--<p ng-mouseover="bool=!bool" ng-mouseout="bool=!bool">显示/隐藏</p>-->
        <!--<h1 ng-show="bool">1</h1>-->
        <!--<h1 ng-hide="bool">2</h1>-->

        <!--<p ng-click="bool=!bool">点我变色</p>-->
        <!--<div ng-class="{true:'red',false:'blue'}[bool]">我是变色龙</div>-->

       <div ng-repeat="item in ar">
           <p>{{item.name}}</p>
           <p>{{item.age}}</p>
       </div>

        <div >
            <p ng-repeat="(key,value) in obj">{{key}}</p>
        </div>



    </div>
</body>
</html>